<template>
  <Card size="small" :bordered="false" class="w-4/4 w-full !mt-0 !rounded-lg !p-6px">
    <template #title>
      <div class="flex items-center cursor-pointer">
        <div>解决方案模板</div>
        <ArrowRightOutlined class="ml-10px" />
      </div>
    </template>
    <template #extra>
      <Tag :color="'red'">{{ 1111 }}</Tag>
    </template>

    <div class="flex overflow-auto">
      <Tooltip placement="bottom" color="rgb(255, 255, 255)" overlayClassName="min-w-600px">
        <template #title>
          <!-- <div class="w-600px"> -->
          <video
            src="https://video.thingsboard.io/usecases/air-quality.mp4"
            :autoplay="true"
            :controls="false"
            :loop="true"
            muted
          ></video>
          <!-- </div> -->
        </template>
        <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
          <div>
            <img
              src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
              class="h-97px w-1/1 rounded-lg"
            />
          </div>
          <div class="text-center py-3px">2222222</div>
        </div>
      </Tooltip>

      <Tooltip placement="bottom" color="rgb(255, 255, 255)" overlayClassName="min-w-600px">
        <template #title>
          <!-- <div class="w-600px"> -->
          <video
            src="https://video.thingsboard.io/usecases/air-quality.mp4"
            :autoplay="true"
            :controls="false"
            :loop="true"
            muted
          ></video>
          <!-- </div> -->
        </template>
        <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
          <div>
            <img
              src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
              class="h-97px w-1/1 rounded-lg"
            />
          </div>
          <div class="text-center py-3px">2222222</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" color="rgb(255, 255, 255)" overlayClassName="min-w-600px">
        <template #title>
          <!-- <div class="w-600px"> -->
          <video
            src="https://video.thingsboard.io/usecases/air-quality.mp4"
            :autoplay="true"
            :controls="false"
            :loop="true"
            muted
          ></video>
          <!-- </div> -->
        </template>
        <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
          <div>
            <img
              src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
              class="h-97px w-1/1 rounded-lg"
            />
          </div>
          <div class="text-center py-3px">2222222</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" color="rgb(255, 255, 255)" overlayClassName="min-w-600px">
        <template #title>
          <!-- <div class="w-600px"> -->
          <video
            src="https://video.thingsboard.io/usecases/air-quality.mp4"
            :autoplay="true"
            :controls="false"
            :loop="true"
            muted
          ></video>
          <!-- </div> -->
        </template>
        <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
          <div>
            <img
              src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
              class="h-97px w-1/1 rounded-lg"
            />
          </div>
          <div class="text-center py-3px">2222222</div>
        </div>
      </Tooltip>
      <Tooltip placement="bottom" color="rgb(255, 255, 255)" overlayClassName="min-w-600px">
        <template #title>
          <!-- <div class="w-600px"> -->
          <video
            src="https://video.thingsboard.io/usecases/air-quality.mp4"
            :autoplay="true"
            :controls="false"
            :loop="true"
            muted
          ></video>
          <!-- </div> -->
        </template>
        <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
          <div>
            <img
              src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
              class="h-97px w-1/1 rounded-lg"
            />
          </div>
          <div class="text-center py-3px">2222222</div>
        </div>
      </Tooltip>
      <!-- <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px cursor-pointer">
        <div>
          <img
            src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
            class="h-97px w-1/1 rounded-lg"
          />
        </div>
        <div class="text-center py-3px">2222222</div>
      </div>
      <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px">
        <div>
          <img
            src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
            class="h-97px w-1/1 rounded-lg"
          />
        </div>
        <div class="text-center py-3px">2222222</div>
      </div>
      <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px">
        <div>
          <img
            src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
            class="h-97px w-1/1 rounded-lg"
          />
        </div>
        <div class="text-center py-3px">2222222</div>
      </div>
      <div class="border-1 rounded-lg border-gray-500/10 w-1/5 mr-15px">
        <div>
          <img
            src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
            class="h-97px w-1/1 rounded-lg"
          />
        </div>
        <div class="text-center py-3px">2222222</div>
      </div>
      <div class="border-1 rounded-lg border-gray-500/10 w-1/5">
        <div>
          <img
            src="https://img.thingsboard.io/solutions/temperature_sensors/temperature-sensors-preview.png"
            class="h-97px w-1/1 rounded-lg"
          />
        </div>
        <div class="text-center py-3px">2222222</div>
      </div> -->
    </div>
  </Card>
</template>
<script lang="ts" setup>
  // import { ref } from 'vue';
  import { Tag, Card, Tooltip } from 'ant-design-vue';
  import { ArrowRightOutlined } from '@ant-design/icons-vue';

  defineProps({
    loading: {
      type: Boolean,
    },
  });
</script>
